<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar class="page-nav-bar" title="登录">
      <van-icon slot="left" class="left-icon" @click="$router.go(-1)" name="cross" />
    </van-nav-bar>
    <!-- 表单结构 -->
    <van-form ref="loginFormRef" @submit="onSubmit">
      <van-field type="number" maxlength="11" :rules="loginFormRules.mobile" v-model="loginForm.mobile" name="mobile"
        placeholder="请输入手机号">
        <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field type="number" maxlength="6" :rules="loginFormRules.code" v-model="loginForm.code" name="code"
        placeholder="请输入验证码">
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
        <template #button>
          <van-count-down format="已发送 ss s" @finish="isShowDown=false" v-if="isShowDown" :time="60 * 1000" />
          <van-button v-else @click="clickCode" native-type="button" class="send-sms-btn" size="small" type="primary">
            发送验证码
          </van-button>
        </template>

      </van-field>
      <div class="login-btns">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, setCode } from '../../api/user/index'
export default {
  data () {
    return {
      loginForm: {
        mobile: '',
        code: ''
      },
      loginFormRules: {
        mobile:
          [{ required: true, message: '请填写手机号' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确手机号' }],

        code:
          [{ required: true, message: '请填写验证码' }, { pattern: /^\d{6}$/, message: '请输入六位正确位数' }]

      },
      isShowDown: false // 是否显示倒计时
    }
  },
  methods: {
    // 提交表单，发起请求
    async onSubmit () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      try {
        const res = await login(this.loginForm)
        // console.log(res)
        this.$store.commit('initUser', res.data.data)
        this.$toast.success('亲，登录成功')
        // 跳转登录页面
        this.$router.push('/profile')
      } catch (err) {
        if (err.response && err.response.status === 400) {
          console.log('账号登录失败')
          this.$toast.fail('亲，登录失败')
          return
        }
        // console.log('出错了')
        this.$toast.fail('亲，系统异常登录失败')
      }
    },
    // 点击发送验证码
    async clickCode () {
      // 捕获错误
      try {
        await this.$refs.loginFormRef.validate('mobile')
      } catch (err) {
        return
      }
      // console.log('验证成功')
      // 校验成功后操作
      this.$toast.loading({
        message: '发送中...',
        forbidClick: true
      })
      // 发送验证码
      try {
        await setCode(this.loginForm.mobile)
        this.isShowDown = true // 显示倒计时
        this.$toast.success('发送成功')
      } catch (err) {
        if (err.response && err.response.status === 429) {
          return this.$toast.fail('请勿频繁操作')
        }
        this.$toast.fail('系统异常')
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
.toutiao {
  font-size: 30px;
}
.send-sms-btn {
  width: 152px;
  height: 46px;
  line-height: 46px;
  background-color: #ededed;
  font-size: 22px;
  color: #666;
  // box-sizing: border-box;
  border: 0;
}
.login-btns {
  margin: 53px 28px;
  .van-button {
    width: 694px;
    height: 88px;
    background: #6db4fb;
    border-radius: 10px;
    border: none;
  }
}
</style>
